<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <div class="overview-tabs">

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <div slot="label" class="tab-label">服务需求</div>
          <serviceListSearch ref="scrR1" :active-name="activeName" @resoData="resoDataClick">
           
            <template slot="xxBtn">
                <el-select v-model="listQuery.adminId" clearable placeholder="请选择BD" class="btnScr" @change="filter">
                <el-option
                  v-for="item in BDList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
            <template slot="sxBtn">
              <el-button class="add" @click="filter()">筛选</el-button>
            </template>
            <template slot="statusBtn">
              <el-select v-model="listQuery.type" clearable placeholder="请选择服务类型" class="btnScr" @change="filter">
                <el-option
                  v-for="item in sraArr"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </template>
          </serviceListSearch>
          <serviceListTableDistribution ref="stsa" :active-name="activeName" :reso-data="filter" />
        </el-tab-pane>
        <el-tab-pane name="second">
          <div slot="label" class="tab-label">服务</div>
          <serviceListSearch ref="scrR" @resoDataTwo="resoDataTwoClick">
            <template slot="sxBtn">
              <el-button class="add" @click="filter()">筛选</el-button>
            </template>
            <template slot="xzAdd">
              <el-button class="add" @click="toAddPage">新增</el-button>
            </template>
          </serviceListSearch>
          <serviceListTable ref="end" :reso-data-two="resoDataTwo" :active-name="activeName" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getSer } from '@/api/serviceItem'
import Breadcrumb from '@/components/Breadcrumb'
import { listByRole } from '@/api/manager'
import ServiceListSearch from './components/serviceListSearch'
import ServiceListTable from './components/serviceListTable'
import ServiceListTableDistribution from './components/serviceListTableDistribution'
export default {
  components: {
    ServiceListSearch,
    ServiceListTable,
    Breadcrumb,
    ServiceListTableDistribution
  },
  data() {
    return {
      resoData: {},
      resoDataTwo: {},
      activeName: 'first',
      true: false,
      sraArr: [{ 'label': '类型', 'value': '1' }, { 'label': '类型2', 'value': '2' }],
      listQuery: {},
      stringData: '',
      BDList:[]
    }
  },
  mounted() {
    this.init()
    this.activeName = sessionStorage.getItem('activeName') || 'first'
  },
  methods: {
    handleClick(tab, event) {
      if (this.activeName === 'first') {
        sessionStorage.setItem('activeName', 'first')
        //  this.$refs.mychild1.getList();
      } else if (this.activeName === 'second') {
        sessionStorage.setItem('activeName', 'second')
        //  this.$refs.mychild2.getListsecond();
      }
    },
    resoDataClick(params, stringData) {
      params.type = this.listQuery.type
      params.adminId = this.listQuery.adminId
      this.$refs.stsa.getListSs(params)
    },
    resoDataTwoClick(params, stringData) {
      params.type = this.listQuery.type
      params.adminId = this.listQuery.adminId
      this.$refs.end.getListSs(params)
    },
    filter() {
      let obj = {}

      if (this.activeName === 'first') {
        obj = this.$refs.scrR1.listData()
        obj.type = this.listQuery.type
        obj.adminId = this.listQuery.adminId
        sessionStorage.setItem('activeName', 'first')
        this.$refs.stsa.getListSs(obj)
      } else if (this.activeName === 'second') {
        obj = this.$refs.scrR.listData()
        obj.type = this.listQuery.type
        obj.adminId = this.listQuery.adminId
        sessionStorage.setItem('activeName', 'second')
        this.$refs.end.getListSs(obj)
      }
    },
    toAddPage() {
      this.$router.push({ path: 'serviceListAdd' })
    },
    init() {
      getSer().then(response => {
        console.log(response)
        this.sraArr = response.data
        console.log(this.sraArr, 6666)
       // this.sraArr.unshift({ 'title': '全部', 'id': null })
      })
      listByRole(1).then(response => {
        console.log(response)
        this.BDList = response.data
      })
    }
  }
}
</script>

<style lang="scss">
.overview-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__content {
    padding: 17px;
  }
}
</style>

<style lang="scss" scoped>
.overview-tabs {
  padding: 10px;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}
</style>
